<!--  -->
<template>
  <div >
          <div class="font15 mt10 pl10">
            <span class="titletext ">问题上报</span>
            <div class="graytext  mt10 font13">
              <span >发起人：</span>
              <span class="titletext">{{fromdetal.applyUser}}</span>
            </div>
          </div>
          <div class="font11 mt10 bggray ptandpb10">
          <div class=" graytext pl10">
              <span >发起人组织：</span>
              <span class="titletext">{{fromdetal.belongOrgName}}</span>
          </div>
          <div class="mt10 graytext pl10">
            <span >发起人联系方式：</span>
            <span class="titletext">{{fromdetal.applyUserPhone}}</span>
          </div>
          </div>
          <van-form @submit="onSubmit">
          <!-- <van-field 
                autosize
                v-model="fromdetal.applyUser"
                readonly
                label-width="3.5em"
                label="发起人:"
                placeholder="请输入..."
                name="applyUser"
          />
            <van-field 
                v-model="fromdetal.belongOrgName"
                readonly
                label-width="5.5em"
                label="发起人组织:"
                placeholder="请输入..."
                name="belongOrgName"
          />
            <van-field 
                v-model="fromdetal.applyUserPhone"
                readonly
                label-width="7.5em"
                label="发起人联系方式:"
                placeholder="请输入..."
                name="applyUserPhone"
          /> -->
          <van-field 
                rows="1"
                autosize
                type="textarea"
                v-model="fromdetal.problemName"
                required
                label-width="4.5em"
                :readonly="!isdrawType"
                label="问题名称:"
                placeholder="请填写问题名称"
                :right-icon="isdrawType?'arrow':''" 添加右侧图标
                
                maxlength="50"
                :rules="[{ required: true, message: '' }]"
                name="problemName"
          />
         <van-field 
            required
            readonly
            :right-icon="isdrawType?'arrow':''" 添加右侧图标
            input-align="left" 设置文字位置
            label-width="6.5em"  设置标题长度
            clickable
            name="expectedCompletionTime"  
            :value="fromdetal.expectedCompletionTime"
            label="期望完成时间:"
            placeholder="请选择期望完成时间"
            @click="showTimePicker = isdrawType?true:false"
             
            :rules="[{ required: true, message: '' }]"
            />
            <van-popup v-model="showTimePicker" position="bottom">
            <van-datetime-picker
                :formatter='formatter'
                v-model="nowDate"
                type="date"
                :min-date="minDate"
                :max-date="maxDate"
                @cancel="showTimePicker = false"
                @confirm="showTimePickeronConfirm"
                />
            </van-popup>
          <van-field
                required
                readonly
                :right-icon="isdrawType?'arrow':''" 添加右侧图标
                input-align="left" 设置文字位置
                label-width="6.5em"  设置标题长度
                clickable
                name="questionModeName"  
                :value="fromdetal.questionModeName"
                label="问题上报方式:"
                placeholder="请选择问题上报方式"
                @click="showTypePicker = isdrawType?true:false"
                
                :rules="[{required: true, message: ''}]"
                />
                <van-popup v-model="showTypePicker" position="bottom">
                    <van-picker
                        show-toolbar
                        :columns="showTypecolumns"
                        @confirm="showTypePickeronConfirm"
                        @cancel="showTypePicker = false"
                    />
                </van-popup> 
            <van-field 
                rows="1"
                autosize
                type="textarea"
                v-model="fromdetal.problemDescribe"
                required
                label-width="6.5em"
                :readonly="!isdrawType"
                label="问题具体描述:"
                placeholder="请填写问题具体描述"
                maxlength="1000"
                :show-word-limit="isdrawType"
                :rules="[{ required: true, message: '' }]"
                name="problemDescribe"
          />
        <div class="border-b-1">
                    <van-field label-width="10em" readonly   
                    label="附件:" class="lyy-width" input-align="left" placeholder="" >
                      </van-field>
                        <template >
                            <template v-if="file_is_show1">
                                <div v-for="(item,index) in fromdetal.drawFiles" :key="index" class="fileBox">
                                    <div :readonly="!isdrawType" class="font14 fileLink" style="color:#0F85CF">
                                         <a target="_blank" @click="openFileUrlfun(item.anonymousFilePath)">{{item.fileName}}</a>
                                       <!-- <a :href='openFileUrlfun(item.anonymousFilePath)'>{{item.fileName}}</a> -->
                                    </div>
                                    <span class="font12 color-red ml5" v-if='isdrawType' @click="uploadFileDelete1(index)">X</span>
                                </div>
                            </template>

                            <form v-if='isdrawType' action="" class="font14 file" style="height:46px;text-align:right;padding-right:20px">
                              <van-uploader v-model="fileList1" :after-read="fileUpload"  :preview-image='false'>
                                    <van-button icon="plus" type="primary" color="#60a9ec">上传文件</van-button>
                                </van-uploader>
                            </form>
                        </template>
                  
        </div>
        <div  v-show="showFeedBack" style=" display: flex;border-bottom: 1px solid #ebedf0;">
            <div class="blue_item"></div>
            <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">问题处理反馈</span>
        </div>  
        
         
          <van-field 
                v-show="showFeedBack"
                :readonly="!feedBackCanEdit"  
                rows="1"
                autosize
                type="textarea"
                v-model="fromdetal.problemFeedback"
                 label-width="8.5em"
                label="问题处理结果反馈:"
                placeholder="请输入问题处理结果反馈"
                maxlength="1000"
                :show-word-limit="feedBackCanEdit"
                name="problemFeedback"
                :rules="[{ required: feedBackNeedEdit, message: '' }]"
          /> 
          <div class="border-b-1"  v-show="showFeedBack">
                    <van-field label-width="10em" readonly   
                    label="附件:" class="lyy-width" input-align="left" placeholder="" >
                      </van-field>
                        <template >
                            <template v-if="file_is_show2">
                                <div v-for="(item,index) in fromdetal.feedBackFiles" :key="index" class="fileBox">
                                    <div :readonly="!feedBackCanEdit" class="font14 fileLink" style="color:#0F85CF">
                                       <!-- <a :href='openFileUrlfun(item.anonymousFilePath)'>{{item.fileName}}</a> -->
                                         <a target="_blank" @click="openFileUrlfun(item.anonymousFilePath)">{{item.fileName}}</a>
                                    </div>
                                    <span class="font12 color-red ml5" v-if='feedBackCanEdit' @click="uploadFileDelete2(index)">X</span>
                                </div>
                            </template>

                            <form v-if='feedBackCanEdit' action="" class="font14 file" style="height:46px;text-align:right;padding-right:20px">
                              <van-uploader v-model="fileList2" :after-read="fileUpload2"  :preview-image='false'>
                                    <van-button icon="plus" type="primary" color="#60a9ec">上传文件</van-button>
                                </van-uploader>
                            </form>
                        </template>
                  
        </div>
          <van-field 
                v-show="showFeedBack"
                autosize
                v-model="fromdetal.feedBackApplyUser"
                readonly
                label-width="3.5em"
                label="反馈人:"
                placeholder=""
                name="feedBackApplyUser"
          />
          <van-field 
                v-show="showFeedBack"
                autosize
                v-model="fromdetal.feedBackBelongOrgName"
                readonly
                label-width="5.5em"
                label="反馈人组织:"
                placeholder=""
                name="feedBackBelongOrgName"
          />
          <van-field 
                v-show="showFeedBack"
                autosize
                v-model="fromdetal.feedApplyUserPhone"
                readonly
                label-width="7.5em"
                label="反馈人联系方式:"
                placeholder=""
                name="feedApplyUserPhone"
          />
           <van-field 
                v-show="isdrawType"
                readonly
                style="padding-bottom: 42px"
                label=""
          />
         <div v-show="isdrawType||todotype" class="footer">
                <van-button  block  type="info" native-type="submit">流转下一步</van-button>
         </div>
        </van-form>
        <div >
        <div v-show="!isdrawType&&!istaizhang" class="spline"></div>
        <div v-show="!isdrawType&&!istaizhang"  style="padding-bottom: 42px">
          <div class="stitle font14">审批意见</div>
          <div v-if="approveList.length > 0" class="swrap" style="width: 100%">
            <div
              class="spiece_flex"
              v-for="(item, index) in approveList"
              :key="index"
            >
              <div class="vertical-a-t display-ib" style="width: 25px">
                <i
                  v-if="index == 0"
                  class="iconfont icon-current font16 color-red2"
                ></i>
                <i
                  v-if="index > 0"
                  class="iconfont icon-yiban font16 color-theme"
                ></i>
               <div v-if="index != (approveList.length-1)" class="optionline"></div>
              </div>
              <div class="vertical-a-t display-ib" style="width: calc(100%)">
                <div style="white-space: nowrap">
                  <span class="color-theme font14"
                    >{{ item.PRODUCERNAME || "暂无" }}：</span
                  >
                  <span class="color-2 font14">{{
                    item.CONTENT || "暂无"
                  }}</span>
                </div>
                <div
                  class="mt05 color-8"
                  style="display: flex; align-items: baseline"
                >
                  <div
                    class="display-ib vertical-a-t font12"
                    style="margin-top: 2px;width: 100%"
                  >
                    {{ item.ORGNAME || "暂无" }}
                  </div>
                  <div
                    class="display-ib vertical-a-t font12 text-r"
                    style="margin-left: 10px; margin-top: 2px;text-align: right;width: 100%"
                  >
                    {{ item.MODIFIEDTIME || "暂无" }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="color-9 font12 text-c">暂无数据</div>
          </div>
        </div>
      </div>
 </div>
</template>

<script>
import {getWtsbDetail,saveszjsDetail,getZcxjOpinionDetail,uploadProcessFiles}  from "@/api/gettodo"
import {mapGetters} from "vuex"
import { Notify, Toast } from 'vant'
import moment from 'moment'
import {openFileUrl} from '@/store/openFile'
  export default {
    components: {
       
    },
    name:'wtsbdetail',
    data(){
            return{
                isdrawType:true,
                fromdetal:{},
                params:this.$route.query,
                minDate: new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()),
                maxDate: new Date(new Date().getFullYear()+60,new Date().getMonth(),new Date().getDate()),
                nowDate: new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()),
                showTimePicker:false,
                showTypePicker:false,
                showTypecolumns:['问题上报','问题存储'],
                approveList:[],
                todotype:false,
                showFeedBack:false,
                feedBackCanEdit:false,
                feedBackNeedEdit:false,
                istaizhang:false,
                file_is_show1:true,
                file_is_show2:true,
                fileList1:[],
                fileList2:[],
            }
    },
    computed:{
        ...mapGetters(['user']),
        ...mapGetters(['userinfo'])
    },
    //生命周期--创建完成
    created() {
          console.log("是否为起草"+this.params.isdraw);
       if(this.params.todoType=='1'){
          this.todotype=true;
        }else{
          this.todotype=false;
        }
         if(this.params.isdraw=='1'){
          this.isdrawType=true;
        }else{
          this.isdrawType=false;
        }
        //  this.isdrawType=this.params.isdraw;
        //  this.todotype = this.params.todoType;
         //判断是否需要填写反馈信息
        //  if(this.todotype && this.params.location == 'djfupt.braAdminFeedback'){
      
         
         if (this.isdrawType&&this.params.istaizhang!='1'){
            console.log("111111");
             this.fromdetal.applyUser=this.userinfo.truename;
             this.fromdetal.belongOrgName=this.userinfo.authOrgs[0].displayName;
             this.fromdetal.applyUserPhone =this.userinfo.preferredMobile;
             this.fromdetal.applyTime =moment(new Date()).format('YYYY-MM-DD');
             this.fromdetal.feedBackApplyUser=this.userinfo.truename;
             this.fromdetal.feedBackBelongOrgName=this.userinfo.authOrgs[0].orgName;
             this.fromdetal.feedApplyUserPhone =this.userinfo.preferredMobile;
             this.feedBackCanEdit=false;
             this.showFeedBack=false;
             this.istaizhang=false;
         }else if (!this.isdrawType&&this.params.processInstId!=undefined){
               console.log("22222222");
               if(this.params.istaizhang=='1'){
                 this.istaizhang=true;
               }else{
                  this.istaizhang=false;
                  if(this.todotype){    
                      if(this.params.location=='djfupt.proAdminFeedback'){
                        this.feedBackNeedEdit=true;
                        this.feedBackCanEdit=true;
                      }else if(this.params.location=='djfupt.proAdminFeedbackAsk'){
                        this.feedBackNeedEdit=false;
                        this.feedBackCanEdit=false;
                      }else {
                        this.feedBackNeedEdit=false;
                        this.feedBackCanEdit=true;
                      }
                  }else {
                    this.feedBackCanEdit=false;
                  }
               }
              this.showFeedBack=true;
              this.getdetail();
         }
    },
    activated() {
       
    },
    //生命周期--挂载完成
    mounted() {

    },
    //方法调用
    methods: {
      openFileUrlfun(value){
            this.$router.push(
                {
                 name:'fileview',
                 query:{
                     openFileUrl: openFileUrl(value)
                    }
                }
            );
        },
       formatter(type, val) {
            if (type === 'year') {
              return `${val}年`;
            } else if (type === 'month') {
              return `${val}月`;
            } else if (type === 'day') {
              return `${val}日`;
            } else if (type === 'hour') {
              return `${val}时`;
            } else if (type === 'minute') {
              return `${val}分`;
            }
            return val;
          },
        getdetail(){
            Toast.loading({
                message:'加载中',
                forbidClick:false
            });
            getWtsbDetail(Object.assign(this.params,{userName:this.user.userName}))
                .then((result)=>{
                    this.fromdetal={};
                    Toast.clear();
                    if(!result.data){
                        Notify(result.message);
                        return;
                    }
                    if(result.data.data){
                        this.fromdetal=result.data.data;
                        if(!result.data.data.drawFiles){
                            this.fromdetal.drawFiles=[];
                        }
                        if(this.fromdetal.questionMode == '0'){
                            this.fromdetal.questionModeName='问题上报';
                        }else if(this.fromdetal.questionMode == '1'){
                            this.fromdetal.questionModeName='问题存储';
                        }
                    }

                    this.fromdetal.feedBackApplyUser=this.userinfo.truename;
                    this.fromdetal.feedBackBelongOrgName=this.userinfo.authOrgs[0].orgName;
                    this.fromdetal.feedApplyUserPhone =this.userinfo.preferredMobile;
                })
                if(!this.istaizhang){
                      getZcxjOpinionDetail(Object.assign(this.params),{userName:this.user.userName})
                        .then((result)=>{
                          Toast.clear();
                          if(!result.data){
                            Notify(result.message);
                            return;
                          }
                          this.approveList=result.data.data.reverse();
                        })
                }
               
        },
        showTimePickeronConfirm(value){
            this.fromdetal.expectedCompletionTime=moment(value).format('YYYY-MM-DD');
            this.showTimePicker=false;
        },
        showTypePickeronConfirm(value){
            this.fromdetal.questionModeName=value;
            this.showTypePicker=false;
            if(value == '问题上报'){
               console.log('问题上报问题上报问题上报')
                this.fromdetal.questionMode='0';
                this.showFeedBack=false;
                this.feedBackCanEdit=false;
                this.feedBackNeedEdit=false;
            }else if(value == '问题存储'){
              console.log('问题存储问题存储问题存储')
                this.fromdetal.questionMode='1';
                this.showFeedBack=true;
                this.feedBackCanEdit=true;
                this.feedBackNeedEdit=true;
            }
             console.log('问题存储问题存储问题存储'+this.feedBackCanEdit)
        },
       
        onSubmit(values){
            console.log('values'+JSON.stringify(this.fromdetal))
            this.fromdetal.type="B"; 
            this.$router.push(
            {
              name:'zcxjtosubmit',
              params:{
                formData:this.fromdetal,
                idcode:this.params
              }
            }
          );
        },
         fileUpload(file,detail){
            
            console.log('111'+JSON.stringify(file))
            let dataurl=file.content;
            let arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            var filename=    this.fileList1[0].file.name;
            let fileData = new FormData();
            fileData.append('pmInsType', 'A');
            fileData.append('pmInsTypePart', '1');       
            fileData.append('files', new File([u8arr], filename+"", {
                    type: mime
                }));
            this.fileList1=[];
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
            });
            uploadProcessFiles(fileData,Object.assign({userName:this.user.userName}))
            .then(res=>{
                Toast.clear();
                if(!res.data){
                    Notify(res.message);
                    return;
                }
                this.file_is_show1=false;
                if(this.fromdetal!=null&&this.fromdetal.drawFiles!=null){
                    let listdetails = this.fromdetal.drawFiles;
                    listdetails= listdetails.concat(res.data.data.sysFiles);
                    this.fromdetal.drawFiles=listdetails;
                    console.log(JSON.stringify(this.fromdetal.drawFiles))
                }else{
                    if(this.fromdetal==null){
                        this.fromdetal={};
                    }
                    this.fromdetal.drawFiles=[];
                    this.fromdetal.drawFiles=res.data.data.sysFiles;
                }
                this.file_is_show1=true;
            })
            .catch(err=>{
                 Toast.clear();
                Notify('上传失败');
            })
            // drawFiles
        },uploadFileDelete1(index){
          this.file_is_show1=false;
          this.fromdetal.drawFiles.remove(index);
          this.file_is_show1=true;
        },
         fileUpload2(file,detail){
            
            console.log('111'+JSON.stringify(file))
            let dataurl=file.content;
            let arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            var filename=    this.fileList2[0].file.name;
            let fileData = new FormData();
            fileData.append('pmInsType', 'A');
            fileData.append('pmInsTypePart', '1');       
            fileData.append('files', new File([u8arr], filename+"", {
                    type: mime
                }));
            this.fileList2=[];
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
            });
            uploadProcessFiles(fileData,Object.assign({userName:this.user.userName}))
            .then(res=>{
                Toast.clear();
                if(!res.data){
                    Notify(res.message);
                    return;
                }
                this.file_is_show2=false;
                if(this.fromdetal!=null&&this.fromdetal.feedBackFiles!=null){
                    let listdetails = this.fromdetal.feedBackFiles;
                    listdetails= listdetails.concat(res.data.data.sysFiles);
                    this.fromdetal.feedBackFiles=listdetails;
                    console.log(JSON.stringify(this.fromdetal.feedBackFiles))
                }else{
                    if(this.fromdetal==null){
                        this.fromdetal={};
                    }
                    this.fromdetal.feedBackFiles=[];
                    this.fromdetal.feedBackFiles=res.data.data.sysFiles;
                }
                this.file_is_show2=true;
            })
            .catch(err=>{
                 Toast.clear();
                Notify('上传失败');
            })
            // drawFiles
        },uploadFileDelete2(index){
          this.file_is_show2=false;
          this.fromdetal.feedBackFiles.remove(index);
          this.file_is_show2=true;
        }
    }
  }
</script>
<style  scoped>
/* @import url();*/
.consume_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #fff;
}
.consume_title_left {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
}
.mt10{
     margin-top:10px
 }
</style>